<template>
  <div class="reports">
    <div class="navigation">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="box-card">
      <div
        id="main"
        style="width:100%; height: 400px;"
      ></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Reports",
  data() {
    return {
      chartData: [],

      // 指定图表的配置项和数据
      // 需合并的选项

      options: {
        title: {
          text: '用户来源',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3',
            },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
      },
    };
  },

  mounted() {
    // 初始化echarts
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 使用刚指定的配置项和数据显示图表。

    this.axios({
      method: "get",
      url: "reports/type/1",
    })
      .then((res) => {
        
        if (res.data.meta.status == 200) {
          // this.chartData = this.data.data;

          
          let newObj = _.merge( this.options,res.data.data);
          

          // myChart.setOption(res.data.data);
          myChart.setOption(newObj);
        }
      })
      .catch((err) => {
        
      });

  },

  created() {
    // this.getChartData();
  },
  methods: {
    // getChartData() {
    //   this.axios({
    //     method: "get",
    //     url: "reports/type/1",
    //   })
    //     .then((res) => {
    //       
    //       if (res.data.meta.status == 200) {
    //         this.chartData = this.data.data;
    //       }
    //     })
    //     .catch((err) => {
    //       
    //     });
    // },
  },
};
</script>

<style lang="less" scoped>
.reports {
  margin-top: 70px;
}

.box-card {
  margin-top: 22px;
}
</style>